<template>
	<view>
		<u-toast ref="uToast" />
		<view class="navStyle">
			<u-navbar :is-back="false" z-index=999 title="" :background="background">
				<view class="slot-wrap" @tap="goBack">
					<u-icon name="close" margin-left="220rpx" label="撰写评论" label-size="45" color="#000000" size="40" class="u-line-1"></u-icon>
				</view>
				<!-- 设置监听输入框输入数字的时候变绿否则禁用 -->
				<text style="margin-left: 100rpx;font-size:40rpx;color: #00A0FF;" @tap="send" class="u-line-1">提交评价</text>
			</u-navbar>
		</view>
		<view class="content">
			<u-sticky>
				<!-- 只能有一个根元素 -->
				<view class="sticky">
					<u-rate active-color="#F99939" :min-count="1" :count="count" v-model="evaluteFormData.courseScore" gutter="20" size="60" ></u-rate>
					<view style="padding-left: 80rpx;letter-spacing: 4rpx;">点击星星来评分</view>
				</view>
			</u-sticky>
			<view style="height: 20rpx;background-color: #EDEDED;width: 750rpx;"></view>
					<u-line style="margin-top: 10rpx;width: 750rpx;" color="#f4f4f5" />
			
			<textarea :value="evaluteFormData.courseEvaluate" class="textStyle" placeholder="评价内容(请输入5到250字)" auto-height minlength=5 maxlength=250 @input="contentInput"></textarea>
		</view>
	</view>
</template>

<script>
	// 指定
	import {
		evaluateCourse
	} from "@/api/modules/joinCourse.js";
	
	export default {
		data() {
			return {
				count:5,
				evaluteFormData:{
					courseId:'',
					userEmail:'',
					courseScore:'',
					courseEvaluate:'',
				},
				background: {
					backgroundColor: '#ffffff',
					//backgroundImage: 'linear-gradient(45deg,#c2e9fb,#a1c4fd)'
				},
				
			}
		},
		methods: {
			send() {
				//console.log('内容发送')
				if(this.evaluteFormData.courseScore == ""){
					this.$refs.uToast.show({
						title: '老师这么辛苦，快给个评价吧~',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'warning', 
						// 如果不需要图标，请设置为false
						duration: 1500
					})
				}
				else if(this.evaluteFormData.courseEvaluate == ""){
					this.$refs.uToast.show({
						title: '评论不能为空',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'warning', 
						// 如果不需要图标，请设置为false
						duration: 1500
					})
				}
				else if(this.evaluteFormData.courseId == ''||this.evaluteFormData.userEmail == ''){
					this.$refs.uToast.show({
						title: '系统可能出错啦，请退出重新登陆',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'error', 
						// 如果不需要图标，请设置为false
						duration: 1500
					})
				}
				else{
					//console.log("这是当前用户邮箱"+this.comment.proposeUserEmail)
					evaluateCourse({
						...this.evaluteFormData
					})
						.then(resp => {
							this.$refs.uToast.show({
								title: '评论成功',
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'success', 
								// 如果不需要图标，请设置为false
								duration:'1000',
								//back:true
							})
							setTimeout(function () {
							            uni.navigateBack(1)
							        }, 1000);
						})
						.catch(resp => {
							this.$refs.uToast.show({
								title: '发布失败',
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'error', 
								// 如果不需要图标，请设置为false
								duration:'1000',
							})
						})
				}
				
			},
			goBack(){
					uni.navigateBack(1)
			},
			//检测值并赋值
			contentInput(e){
				this.evaluteFormData.courseEvaluate = e.detail.value
			}
		},
		onLoad: function (params) { //option为object类型，会序列化上个页面传递的参数
		   let that = this
		   that.evaluteFormData.courseId = params.courseID;
		   that.evaluteFormData.userEmail = uni.getStorageSync('userEmail');
		}
	}
</script>

<style>
	.slot-wrap {
		display: flex;
		align-items: center;
		margin-left: 30rpx;

		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
	.content {
		width: 750rpx;
		height: 1000rpx;
	}

	.navStyle {
		display: block;
		background-color: #F29100;
		z-index: 999;
	}

	.sticky {
		padding-left: 170rpx;
		padding-top: 25rpx;
		width: 750rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		font-size: 30rpx;
		line-height: 75rpx;
		color: #BABABA;
	}
	.textStyle{
		width: 700rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 20rpx;
		font-size: 40rpx;
	}
</style>
